<template>
    <div class="common-draw-container">
        <span class="common-draw-title"> 普通标绘、编辑</span>
        <div class="draw-btns">
            <el-button type="primary" @click="DrawPointOnScene">点</el-button>
            <el-button type="primary" @click="DrawLineOnScene">线</el-button>
            <el-button type="primary" @click="DrawPolygonOnScene">多边形</el-button>
            <el-button type="primary" @click="DrawRectangleOnScene">矩形</el-button>
            <el-button type="primary" @click="DrawCircleOnScene">圆形</el-button>
            <el-button type="primary" @click="DrawSectorOnScene">扇形</el-button>
            <el-button type="primary" @click="DrawEllipseOnScene">椭圆</el-button>
            <el-button type="primary" @click="DrawEllipse2OnScene">椭圆2</el-button>
            <el-button type="primary" @click="DrawLabelOnScene">文字</el-button>
            <el-button type="primary" @click="DrawBillboardOnScene">图标</el-button>
            <el-button type="primary" @click="DrawModelOnScene">模型</el-button>

        </div>
        <el-text>{{ drawInfo }}</el-text>
    </div>


</template>

<script lang="ts" setup>
import CommonLabel from '@/system/Draw/Points/CommonLabel'
import CommonLine from '@/system/Draw/Lines/CommonLine'
import CommonPoint from '@/system/Draw/Points/CommonPoint'
import CommonCircle from '@/system/Draw/Polygons/CommonCircle'
import CommonEllipse from '@/system/Draw/Polygons/CommonEllipse'
import CommonEllipseUseCesium from '@/system/Draw/Polygons/CommonEllipseUseCesium'
import CommonPolygon from '@/system/Draw/Polygons/CommonPolygon'
import CommonRectangle from '@/system/Draw/Polygons/CommonRectangle'
import CommonSector from '@/system/Draw/Polygons/CommonSector'
import EventDispatcher from '@/system/EventDispatcher/EventDispatcher'
import CesiumViewer from '@/Viewer/CesiumViewer'
import CommonBillboard from '@/system/Draw/Points/CommonBillboard'
import CommonModel from '@/system/Draw/Points/CommonModel'


const drawInfo = ref('')

let viewer = CesiumViewer.viewer
const dispatcher = new EventDispatcher();
// 监听绘制结果
dispatcher.on('DRAWEND', (payload: any) => {
    drawInfo.value = payload.text;
});
dispatcher.on('DRAWSTART', (payload: any) => {
    drawInfo.value = payload.text;
});
dispatcher.on('MOUSEMOVE', (payload: any) => {
    drawInfo.value = payload.text;
});
dispatcher.on('EDITSTART', (payload: any) => {
    drawInfo.value = payload.text;
});

dispatcher.on('EDITEND', (payload: any) => {
    drawInfo.value = payload.text;
});


const DrawPointOnScene = () => {
    const pointTool = new CommonPoint(viewer!, dispatcher);
    pointTool.start();
}
const DrawLabelOnScene = () => {
    const labelTool = new CommonLabel(viewer!, dispatcher);
    labelTool.start();
}
const DrawBillboardOnScene = () => {
    const billboardTool = new CommonBillboard(viewer!, dispatcher);
    billboardTool.start();
}
const DrawModelOnScene = () => {
    const modelTool = new CommonModel(viewer!, dispatcher);
    modelTool.start();
}

const DrawLineOnScene = () => {
    const lineTool = new CommonLine(viewer!, dispatcher);
    lineTool.start();

}

const DrawPolygonOnScene = () => {
    const polygonTool = new CommonPolygon(viewer!, dispatcher);
    polygonTool.start();
}

const DrawRectangleOnScene = () => {

    const rectangleTool = new CommonRectangle(viewer!, dispatcher);
    rectangleTool.start();
}
const DrawSectorOnScene = () => {
    const sectorTool = new CommonSector(viewer!, dispatcher);
    sectorTool.start();
}
const DrawCircleOnScene = () => {
    const circleTool = new CommonCircle(viewer!, dispatcher);
    circleTool.start();
}
const DrawEllipseOnScene = () => {
    const ellipseTool = new CommonEllipse(viewer!, dispatcher);
    ellipseTool.start();

}

const DrawEllipse2OnScene = () => {
    // 这里演示另一种创建椭圆的方式
    const ellipse2Tool = new CommonEllipseUseCesium(viewer!, dispatcher);
    ellipse2Tool.start();
}

</script>

<style lang="scss" scoped>
.common-draw-container {
    padding: 20px;
    text-align: left;

    .common-draw-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .draw-btns {
        margin-top: 20px;
        margin-bottom: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 24px;
    }

    .draw-btns .el-button {
        width: 80px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }


    .el-text {
        color: yellow
    }
}
</style>